/**
 *coordinateType(坐标类型):
 *  1 = WGS84 地球坐标系
 *  2 = GCJ-02 火星坐标系 
 *  3 = BD-09 百度坐标系
 */
<template>
  <div class="oce-map">
    <component
      :is="mapName"
      ref="myMap"
      :point-list.sync="pointList"
      :city="city"
      :single-point="singlePoint"
    >
      <component
        :is="mapName + 'Polygon'"
        ref="myMapPolygon"
      />
    </component>
    <map-toolbar
      v-if="showToolbar"
      :map-type.sync="mapType"
      :city.sync="city"
      ref="toolbar"
      @drag="drag"
      @drawSome="drawSome"
      @drawArea="drawArea"
      @switchCity="switchCity(city)"
    />
  </div>
</template>

<script>
import MapBd from './components/MapBd'
import MapGg from './components/MapGg'
import MapGd from './components/MapGd'
import MapBdPolygon from './components/polygon/MapBdPolygon'
import MapGdPolygon from './components/polygon/MapGdPolygon'
import MapToolbar from './components/toolbar'

export default {
  name:"OceMap",
  components: {MapBd, MapGg, MapGd, MapBdPolygon, MapGdPolygon, MapToolbar},
  props:{
    showToolbar: {
      type: Boolean,
      default: function() {
        return true
      }
    }
  },
  data() {
    return {
      // 地图类型
      mapType: 1,
      // 标记点集合
      pointList: [],
      // 城市
      city: '北京',
      singlePoint: true
    }
  },
  computed:{
    // eslint-disable-next-line vue/return-in-computed-property
    mapName: function() {
      switch(this.mapType) {
        case 1:
          return 'map-bd'
        case 2:
          return 'map-gd'
        case 3:
          return 'map-gg'
      }
    }
  },
  methods: {
    // 清空地图覆盖物
    clearOverlay() {
      if(this.pointList.length > 0) {
        this.pointList = []
        this.$refs.myMap.clearOverlay()
      }
    },
    // 获取地图基础信息(地图类型 中心点 缩放级别 是否开启单点模式)
    getMapInfo() {
      let {zoom, center} = this.$refs.myMap.getMapInfo()
      return {
        mapType: this.mapType,
        singlePoint: this.singlePoint,
        zoom,
        center
      }
    },
    /**
     * 设置地图基础信息(地图类型 是否开启单点模式)
     * @param {Object} option - 配置对象
     * @param {number} option.mapType - 地图类型
     * @param {Boolean} option.singlePoint - 是否开启单点模式
     */ 
    setMapBasic(option) {
      // 设置地图类型
      if(option.mapType === 1) {
        this.mapType = 1
      } else if(option.mapType === 2) {
        this.mapType = 2
      }
      // 配置单点模式
      if(!option.singlePoint) {
        this.singlePoint = false
      } else if(option.singlePoint) {
        this.singlePoint = true
      }
    },
    /**
     * 配置中心点及缩放级别
     * @param {Object} option - 配置对象
     * @param {number} option.zoom - 缩放级别
     * @param {Object} option.center - 中心点
     */ 
    setCenterZoom(option) {
      this.$refs.myMap.setCenterZoom({
        center:option.center || {},
        zoom:option.zoom || ''
      })
    },
    // 获取地图点列表 (坐标点解析 行政位置解析 邮编)
    async getPointList() {
      let pointList = []
      for (let i = 0 ; i < this.pointList.length ; i++) {
        let res = await this.$refs.myMap.getAddress(this.pointList[i])
        pointList.push(res)
      }
      return pointList
    },
    /**
     * 添加地图点
     *  { 经纬度,坐标类型,坐标ID }
     */ 
    addPoint(pointaList) {
      pointaList.map(item => {
        if(!item.coordinateType) item.coordinateType = 1
        if(!item.pointId) return false // 必须指定pointId
        this.$refs.myMap.addPoint(item)
      })
    },
    // 坐标系转换(无数据测试,暂缓开发)
    // 工具-拖动
    drag() {
      this.$refs.myMap.drag()
      this.$refs.toolbar.btn = 1
    },
    // 工具-画点
    drawSome() {
      this.$refs.myMap.drawSome()
      this.$refs.toolbar.btn = 2
    },
    // 工具-绘制多边形
    drawArea() {
      this.$refs.myMap.drawArea()
      this.$refs.toolbar.btn = 3
    },
    // 切换城市
    switchCity(city = '北京') {
      this.$refs.myMap.switchCity(city)
    }
  }
}
</script>

<style lang="scss" scoped>
.oce-map {
  width: 100%;
  height: 100%;
  position: relative;
  .map{
    width: 100%;
    height: 100%;
  }
}
</style>
